body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* 头部区域的样式 */
header {
  background-color: #fefbfb; /* 浅灰色背景 */
  color: rgb(12, 12, 12); /* 文字颜色为深灰色 */
  padding: 1rem; /* 内边距为1rem */
  display: flex; /* 使用弹性盒子布局 */
  justify-content: space-between; /* 子元素分散对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.logo img {
    height: 40px;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #000;
}
main {
    padding: 50px 20px;
}

h1 {
    font-size: 28px;
    margin-bottom: 20px;
}

p {
    font-size: 18px;
    margin-bottom: 30px;
}

.button {
    display: inline-block;
    background-color: #FFD700;
    color: #000;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
}
/* 低高度图片的样式 */
.low-height-image {
    width: 100%; /* 图片宽度铺满整个容器 */
    height: 15px; /* 设置图片高度 */
    object-fit: cover; /* 保持图片比例，裁剪超出部分 */
  }

.right-aligned-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 20px;
}

.text-label {
    font-weight: bold;
    margin-right: 20px;
}

.separator {
    background-color: #878585;
    width: 2px;
    height: 25px;
    margin-right: 20px;
}

.nav-button {
    background-color: rgb(252, 252, 252);
    color: #0b0b0b;
    padding: 8px 30px;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 20px;
    height: 25px;
    border: none;
}

.left-aligned-content {
    float: left; /* 使内容浮动到左边 */
    width: 100%; /* 根据需要调整宽度 */
    padding: 0 20px; /* 添加一些内边距 */
    box-sizing: border-box; /* 确保宽度包括内边距 */
}

.limited-size-section {
    float:left;
    width: 50%; /* 宽度为容器的80% */
    max-width: 400px; /* 最大宽度为800px */
    margin: 20px auto; /* 上下边距为20px，左右自动（居中） */
    padding: 20px; /* 内边距为20px */
    border: none;
    background-color: none;
    box-shadow: none; 
    text-align: left;
}
.limited-size-section h1 {
    text-align: center;
}
.smaller-text {
    font-size: 16px; /* 设置字体大小为16px，根据需要调整 */
    font-weight: normal; /* 设置字体为正常粗细，不加粗 */
}

.content-with-image {
    display: flex;
    width: 100%;
    height: 400px;
}

.image-section {
    flex: 1; /* 左半部分占据一半的宽度 */
    padding: 20px;
}

.text-section {
    flex: 1; /* 右半部分占据另一半的宽度 */
    padding: 20px;
    text-align: center;
}


.image-section {
    position: relative;
    width: 50%;
    height: 400px;
    padding: 20px;
}

.content-with-image .image-section img {
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* 默认不显示 */
}


.new-content-with-image {
    display: flex;
    width: 100%;
    height: 400px;
}

.static-content-with-image {
    display: flex;
    width: 100%;
    height: 400px;
}

.text-section {
    flex: 1; /* 左半部分占据一半的宽度 */
    padding: 20px;
}

.image-section {
    flex: 1; /* 右半部分占据另一半的宽度 */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-section img {
    max-width: 100%;
    max-height: 100%;
}